<template>
  <el-card class="zfile-admin-short-card">
    <el-form :inline="true"
             class="zfile-admin-short-form"
             :model="searchParam">
      <el-form-item label="直链 Key">
        <el-input size="small"
                  v-model="searchParam.key"></el-input>
      </el-form-item>
      <el-form-item label="路径/文件名">
        <el-input size="small"
                  v-model="searchParam.url"></el-input>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker v-model="date"
                        type="daterange"
                        align="right"
                        unlink-panels
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="dateChange"
                        :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="init"
                   size="small"
                   icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary"
               size="small"
               icon="el-icon-plus"
               @click="openAddLinkItemDialog">新增直链</el-button>
    <el-button type="danger"
               size="small"
               icon="el-icon-delete"
               @click="batchDeleteLinkItem">删除所选</el-button>
    <el-table :data="linkLog"
              @row-click="handleRowClick"
              @sort-change="sortMethod"
              :default-sort="{prop: 'createDate', order: 'descending'}"
              ref="shortLinkTable">
      <el-table-column type='selection'
                       label="序号">
      </el-table-column>
      <el-table-column type='index'
                       label="序号">
      </el-table-column>
      <el-table-column prop="key"
                       :show-overflow-tooltip="true"
                       width="100"
                       sortable="custom"
                       :sort-orders="['ascending', 'descending']"
                       label="Key">
        <template slot-scope="scope">
          <a target="_blank"
             :href="siteDomain + '/s/' + scope.row.key">{{scope.row.key}}</a>
          <i class="el-icon-edit-outline table-edit-icon"
             @click="editKey(scope.row.id)"></i>
        </template>
      </el-table-column>
      <el-table-column prop="url"
                       :show-overflow-tooltip="true"
                       sortable="custom"
                       :sort-orders="['ascending', 'descending']"
                       label="路径">
      </el-table-column>
      <el-table-column prop="createDate"
                       width="150"
                       sortable="custom"
                       :sort-orders="['ascending', 'descending']"
                       label="创建日期">
      </el-table-column>
      <el-table-column width="120"
                       label="操作">
        <template slot-scope="scope">
          <el-popconfirm @confirm="deleteLink(scope.row.id)"
                         confirmButtonText='确定'
                         cancelButtonText='取消'
                         icon="el-icon-info"
                         iconColor="red"
                         title="确定删除此直链">
            <el-button slot="reference"
                       class="el-icon-delete"
                       size="mini"
                       type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="searchParam.page"
                   :page-sizes="[10, 50, 100, 200, 999999]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :page-size="searchParam.limit"
                   :total="searchParam.total">
    </el-pagination>

    <el-dialog id="cacheDialog"
               width="50%"
               title="直链管理"
               :modal-append-to-body="false"
               v-if="addLinkVisible"
               :visible.sync="addLinkVisible">
      <el-form :model="addLinkModel"
               label-width="150px">
        <el-form-item label="驱动器 ID">
          <el-select v-model="addLinkModel.driveId"
                     placeholder="请选择驱动器">
            <el-option v-for="item in driveList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{item.id}}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="addLinkModel.path"
                    placeholder="请输入路径地址"
                    class="input-with-select">
            <div slot="prepend">/directlink/{{addLinkModel.driveId}}</div>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   icon="el-icon-check"
                   size="small"
                   @click="addLinkItemAction">保存</el-button>
        <el-button icon="el-icon-close"
                   size="small"
                   @click="addLinkVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
    name: 'ShortLink',
    data() {
        return {
            addLinkModel: {
                driveId: null,
                path: ''
            },
            addLinkVisible: false,
            linkUrl: '',
            linkLog: [],
            searchParam: {
                page: 1,
                limit: 10,
                total: 0,
                url: '',
                key: '',
                orderBy: '',
                orderDirection: ''
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            date: ['', ''],
            driveList: [],
            siteDomain: ''
        };
    },
    methods: {
        editKey(id) {
            this.$prompt('请输入要修改为的 Key。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(({ value }) => {
                this.$http.get('/admin/short-link/key', { params: { id: id, newKey: value } }).then(() => {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.init();
                });
            });
        },
        //点击行触发，选中或不选中复选框
        handleRowClick(row) {
            this.$refs.shortLinkTable.toggleRowSelection(row);
        },
        batchDeleteLinkItem() {
            let selection = this.$refs.shortLinkTable.selection;

            if (selection.length === 0) {
                this.$message.warning('请至少选中一行数据');
                return;
            }

            this.$confirm('删除后不可恢复, 是否确认删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                callback: action => {
                    if (action === 'confirm') {
                        let arr = [];
                        for (let index in selection) {
                            arr[index] = selection[index].id;
                        }

                        this.$http.delete('/admin/short-link', { params: { id: arr } }).then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('删除成功');
                                this.init();
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        });
                    }
                }
            });
        },
        addLinkItemAction() {
            alert(this.$store.getters.domain);
            this.addLinkModel.path = this.common.removeDuplicateSeparator('/' + this.addLinkModel.path);
            this.$http.get('/short-link', { params: this.addLinkModel }).then(() => {
                this.$message.success('添加成功');
                this.init();
                this.addLinkVisible = false;
            });
        },
        openAddLinkItemDialog() {
            this.addLinkVisible = true;
        },
        dateChange() {
            if (this.date) {
                this.searchParam.dateFrom = this.date[0];
                this.searchParam.dateTo = this.date[1];
            } else {
                this.searchParam.dateFrom = '';
                this.searchParam.dateTo = '';
            }
        },
        sortMethod({ prop, order }) {
            this.searchParam.orderBy = prop;
            this.searchParam.orderDirection = order === 'descending' ? 'desc' : 'asc';
            this.init();
        },
        handleSizeChange(val) {
            this.searchParam.limit = val;
            this.searchParam.page = 1;
            this.init();
        },
        handleCurrentChange(val) {
            this.searchParam.page = val;
            this.init();
        },
        deleteLink(id) {
            this.$http.get(`/admin/link/delete/${id}`).then(response => {
                if (response.data.code === this.common.responseCode.SUCCESS) {
                    this.$message.success('删除成功');
                    this.init();
                } else {
                    this.$message.error(response.data.msg);
                }
            });
        },
        init() {
            this.$http.get('/admin/link/list', { params: this.searchParam }).then(response => {
                this.linkLog = response.data.data.content;
                this.searchParam.total = response.data.data.totalElements;
                this.searchParam.limit = response.data.data.size;
            });
        },
        loadDriveList() {
            this.$http.get('/drive/list').then(response => {
                this.driveList = response.data.data.driveList;
            });
        },
        getDomainId() {
            this.$http.get('/admin/config').then(response => {
                this.siteDomain = response.data.data.domain;
            });
        }
    },
    mounted() {
        this.init();
        this.loadDriveList();
        this.getDomainId();
    }
};
</script>

<style scoped>
.zfile-admin-short-form >>> .el-form-item:first-child {
    margin-left: 10px;
}

.zfile-admin-short-form >>> .el-form-item:not(:first-child) {
    margin-left: 20px;
}

.el-pagination {
    margin-top: 15px;
}

.table-edit-icon {
    margin-left: 10px;
    cursor: pointer;
}
</style>
